<template>
  <div class="alipayMiniAddOrEdit">
    <el-form ref="alipayMini" :rules="rules" :model="alipayMini" :label-position="'left'"  label-width="160px">
      <el-form-item :label="$t('configLazyLoad.channel.AliAPPTip2')" prop="displayName">
        <el-input v-model.trim="alipayMini.displayName"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.wexinAPPTip28')" prop="fileName" v-if="addOrEdit === 'add'">
        <el-upload
          class="temp-upload"
          :action="uploadUrl"
          accept=".html"
          :data="uploadHeaders"
          :with-credentials="true"
          :on-error="removeUploadList"
          :on-remove="removeUploadList"
          :limit="1"
          :on-success="uploaded"
          ref="upload"
          name="upload"
        >
          <el-button class="small_btn" size="mini">{{$t('configLazyLoad.channel.wexinAPPTip28')}}</el-button><span style="font-size: 12px;margin-left:10px;">{{$t('configLazyLoad.channel.AliAPPTip4')}}</span>
        </el-upload>
        <p class="notice">{{$t('configLazyLoad.channel.AliAPPTip5')}}</p>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.AliAPPTip6')" prop="fileName" v-else>
        <el-input size="mini" v-model.trim="alipayMini.fileName" auto-complete="off" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item :label="$t('configLazyLoad.channel.AliAPPTip7')" prop="">
        <p class="notice" style="margin-top: 12px">{{$t('configLazyLoad.channel.AliAPPTip8')}}</p>
        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
          <img slot="content" style="width: 100%" src="./../../../../../assets/img/alipayMini.png" alt="">
          <span class="setting" type="text">{{$t('configLazyLoad.channel.AliAPPTip9')}}</span>
        </el-tooltip>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="primary_btn fr" @click="saveFun">{{$t('public.save')}}</el-button>
        <el-button class="primary_btn fr" style="margin-right: 20px" @click="cancelFun">{{$t('public.cancel')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'AlipayMiniService',
    data () {
      return {
        rules: {
          displayName: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        },
        alipayMini: {},
        uploadHeaders: {
          type: 'undefined',
          module: '',
          sessionId: this.$store.state.session.sessionId
        },
        uploadUrl: '/fileUpload'
      }
    },
    props: {
      alipayMiniForm: {
        type: Object,
        default: function () {
          return {}
        }
      },
      addOrEdit: {
        type: String,
        default: function () {
          return 'add'
        }
      }
    },
    watch: {
      addOrEdit (cur) {
        if (cur === 'add') {
          this.$emit('alipayReset')
        }
      },
      alipayMiniForm () {
        this.alipayMini = deepClone(this.alipayMiniForm)
        if (!this.alipayMini.displayName) {
          this.$set(this.alipayMini, 'displayName', '')
        }
      }
    },
    methods: {
      uploaded (response, file) {
        this.alipayMini.filePath = ''
        this.alipayMini.fileName = ''
        if (response && response.filePath) {
          let fileName = /[^.]+$/.exec(response.fileName)
          if (fileName && fileName[0] === 'html') {
            if (file.size > 5 * 1024) { // 最多上传5K
              this.$message.error(this.$t('configLazyLoad.channel.AliAPPTip10'))
              this.$refs.upload.clearFiles()
              return false
            } else if (file.size <= 0) {
              this.$message.error(this.$t('configLazyLoad.channel.appTip14'))
              this.$refs.upload.clearFiles()
              return false
            }
            this.alipayMini.filePath = response.filePath
            this.alipayMini.fileName = response.fileName
          } else {
            this.$message.error(this.$t('sms.uploadFileWrong'))
            this.$refs.upload.clearFiles()
            return false
          }
        } else {
          this.$message.error(this.$t('webchat.uploadError'))
          this.$refs.upload.clearFiles()
          return false
        }
      },
      removeUploadList () {
        this.$refs.upload.clearFiles()
      },
      saveFun () {
        this.$refs['alipayMini'].validate((valid) => {
          if (valid) {
            if (!this.alipayMini.fileName) {
              this.$message.error(this.$t('configLazyLoad.channel.wexinAPPTip28'))
              return
            } else {
              let fileNameLength = this.alipayMini.fileName.length
              if ((fileNameLength - 5) !== 32) {
                this.$message.error(this.$t('configLazyLoad.channel.AliAPPTip11'))
                return
              } else {
                let data = {}
                let actionName = ''
                let successNotice = ''
                if (this.addOrEdit === 'add') {
                  data.fileName = this.alipayMini.fileName
                  data.filePath = this.alipayMini.filePath
                  data.displayName = this.alipayMini.displayName
                  actionName = 'addAlipayMini'
                  successNotice = this.$t('configLazyLoad.channel.addSucc')
                } else {
                  actionName = 'editAlipayMini'
                  data.displayName = this.alipayMini.displayName
                  data._id = this.alipayMini._id
                  successNotice = this.$t('configLazyLoad.public.editSuccess')
                }
                this.$store.dispatch(actionName, data).then((resp) => {
                  if (resp && resp.success) {
                    this.$message({
                      message: successNotice,
                      type: 'success'
                    })
                    this.$emit('saveFun')
                  } else {
                    if (resp.message === 'unknow error!') {
                      this.$message.error(this.$t('configLazyLoad.robotSeven.errorMessage2'))
                    } else if (resp.message === 'fileId repeat!') {
                      this.$message.error(this.$t('configLazyLoad.channel.AliAPPTip12'))
                    }
                    this.$refs.upload.clearFiles()
                  }
                })
              }
            }
          }
        })
      },
      cancelFun () {
        this.$emit('cancelFun')
      }
    },
    beforeMount () {
      if (!this.alipayMini.displayName) {
        this.$set(this.alipayMini, 'displayName', '')
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .alipayMiniAddOrEdit
    padding 20px
    .notice
      color #3b5998
      font-size 12px
    .setting
      color #459AE9
      font-size 12px
      position: relative
      top: -10px
    .setting:hover
      cursor pointer
    .delete
      color $c-main
      padding-left 10px
      vertical-align middle
    .delete:hover
      cursor pointer
</style>
